import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/route_name.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class WrapRouteFlowCell extends StatefulWidget {
  const WrapRouteFlowCell({Key? key}) : super(key: key);

  @override
  State<WrapRouteFlowCell> createState() => _WrapRouteFlowCellState();
}

class _WrapRouteFlowCellState extends State<WrapRouteFlowCell> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(RouteName.wrapRoute_flowCell),
        ),
        body: CustomScrollView(
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  if (index == 0) {
                    return _cellStaggeredOne();
                  }
                  if (index == 1) {
                    return _cellStaggeredTwo();
                  }
                  if (index == 2) {
                    return _cellStaggeredThree();
                  }
                  if (index == 3 || index == 4) {
                    return _cellQuiltedFour(index == 3
                        ? QuiltedGridRepeatPattern.inverted
                        : QuiltedGridRepeatPattern.mirrored);
                  }
                  if (index == 5) {
                    return _cellAlignedFive();
                  }
                  return _cellMasonryLast();
                },
                childCount: 7,
              ),
            ),
          ],
        ));
  }

  Widget _cellStaggeredOne() {
    return StaggeredGrid.count(
      crossAxisCount: 4,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: [
        StaggeredGridTile.count(
          crossAxisCellCount: 3,
          mainAxisCellCount: 3,
          child: Tile(index: 0),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 1),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 2),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 3),
        ),
        const SizedBox(
          height: 10,
        )
      ],
    );
  }

  Widget _cellStaggeredTwo() {
    return StaggeredGrid.count(
      crossAxisCount: 5,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: [
        StaggeredGridTile.count(
          crossAxisCellCount: 3,
          mainAxisCellCount: 3,
          child: Tile(index: 0),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 2,
          mainAxisCellCount: 2,
          child: Tile(index: 1),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 2,
          mainAxisCellCount: 2,
          child: Tile(index: 2),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 3),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 4),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 5),
        ),
        const SizedBox(
          height: 10,
        )
      ],
    );
  }

  Widget _cellStaggeredThree() {
    return StaggeredGrid.count(
      crossAxisCount: 1,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: [
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 0),
        ),
        SizedBox(
          height: 10,
        )
      ],
    );
  }

  Widget _cellQuiltedFour(QuiltedGridRepeatPattern type) {
    return GridView.custom(
      padding: EdgeInsets.only(bottom: 10),
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      gridDelegate: SliverQuiltedGridDelegate(
        crossAxisCount: 4,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        repeatPattern: type,
        pattern: const [
          QuiltedGridTile(2, 2),
          QuiltedGridTile(1, 1),
          QuiltedGridTile(1, 1),
          QuiltedGridTile(1, 2),
        ],
      ),
      childrenDelegate: SliverChildBuilderDelegate(
          (context, index) => Tile(index: index),
          childCount: 8),
    );
  }

  Widget _cellAlignedFive() {
    return AlignedGridView.count(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: 10,
      crossAxisCount: 2,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      itemBuilder: (context, index) {
        return Container(
          child: Tile(index: index),
          height: (index % 5 + 1) * 100,
        );
      },
    );
  }

  Widget _cellMasonryLast() {
    return MasonryGridView.count(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      padding: EdgeInsets.all(10),
      itemCount: 10,
      crossAxisCount: 3,
      mainAxisSpacing: 10,
      crossAxisSpacing: 4,
      itemBuilder: (context, index) {
        return Container(
          child: Tile(index: index),
          height: (index % 5 + 1) * 100,
        );
      },
    );
  }

  Widget Tile({int index = 0}) {
    return Container(
      color: Colors.blue,
      // height: extent,
      child: Center(
        child: CircleAvatar(
          minRadius: 20,
          maxRadius: 20,
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          child: Text('$index', style: const TextStyle(fontSize: 20)),
        ),
      ),
    );
  }
}
